import type { ComputedRef, Ref } from 'vue'
import { nextTick, unref } from 'vue'
import { warn } from '@/utils/log'

export function useTableScrollTo(
  tableElRef: Ref<ComponentRef>,
  getDataSourceRef: ComputedRef<Recordable[]>,
) {
  let bodyEl: HTMLElement | null

  async function findTargetRowToScroll(targetRowData: Recordable) {
    const { id } = targetRowData
    const targetRowEl: HTMLElement | null | undefined = bodyEl?.querySelector(
      `[data-row-key="${id}"]`,
    )
    // Add a delay to get new dataSource
    await nextTick()
    bodyEl?.scrollTo({
      top: targetRowEl?.offsetTop ?? 0,
      behavior: 'smooth',
    })
  }

  function scrollTo(pos: string): void {
    const table = unref(tableElRef)
    if (!table)
      return

    const tableEl: Element = table.$el
    if (!tableEl)
      return

    if (!bodyEl) {
      bodyEl = tableEl.querySelector('.ant-table-body')
      if (!bodyEl)
        return
    }

    const dataSource = unref(getDataSourceRef)
    if (!dataSource)
      return

    // judge pos type
    if (pos === 'top') {
      findTargetRowToScroll(dataSource[0])
    }
    else if (pos === 'bottom') {
      findTargetRowToScroll(dataSource[dataSource.length - 1])
    }
    else {
      const targetRowData = dataSource.find(data => data.id === pos)
      if (targetRowData)
        findTargetRowToScroll(targetRowData)

      else
        warn(`id: ${pos} doesn't exist`)
    }
  }

  return { scrollTo }
}
